<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-21 20:11:50
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-04-25 21:08:44
 * @FilePath: \work\pages\index\components\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="detail">
    <view class="detail-item" v-for="item in from.arr" :key="item.id">
      <view class="detail-item-label">{{ item.label }}：</view>
      <view>{{ httpData.order[item.id] }}</view>
    </view>
    <view class="detail-table">
      <next-table
        style="width: 100%"
        stripe
        highlight
        showPaging
        :columns="table.columns"
        sum-text="合计"
        border
        :data="httpData.list"
        @pageChange="pageChange"
        @onWork="onWork"
      >
      </next-table>
    </view>
    <view class="detail-item" v-for="item in from.arr1" :key="item.id">
      <view class="detail-item-label">{{ item.label }}：</view>
      <view>{{ httpData.order[item.id] }}</view>
    </view>
    <work v-model="workData.show" v-model:data="workData.val" />
  </view>
</template>

<script setup>
  import { ref, reactive, defineProps, watch, computed } from 'vue';
  import work from './work.vue';
  let workData = reactive({
    val: {},
    show: false
  });
  let from = reactive({
    arr: [
      { id: 'customer', label: '客户名称' },
      { id: 'order_num', label: '订单编号' },
      { id: 'currency', label: '币种' },
      { id: 'total_amount', label: '订单金额' },
      { id: 'billing_date', label: '开单日期' },
      { id: 'delivery_date', label: '交货日期' },
      { id: 'payment_type', label: '付款方式' },
      { id: 'delivery_type', label: '收货方式' },
      { id: 'contact', label: '收货人' },
      { id: 'contact_delivery_address', label: '收货地址' }
    ],
    arr1: [
      { id: 'count', label: '数量合计' },
      { id: 'clause_service', label: '服务条款' },
      { id: 'approver', label: '审批人' },
      { id: 'member', label: '负责人' },
      { id: 'saler', label: '销售' },
      { id: 'creator', label: '创建人' }
    ]
  });
  let props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  });
  let propId = computed(() => {
    return props.data.id;
  });
  let table = reactive({
    columns: [
      { label: '序号', width: 60, align: 'center', name: 'index', type: 'index' },
      { label: '产品名称', width: 180, align: 'center', name: 'name' },
      { label: '单价', width: 70, align: 'center', name: 'price' },
      { label: '数量', width: 70, align: 'center', name: 'quantity' },
      { label: '金额', width: 70, align: 'center', name: 'money' },
      { label: '产品图片', width: 100, align: 'center', name: 'file_path', type: 'img' },
      { label: '操作', align: 'center', name: 'oper', type: 'operation', renders: [{ name: '报工', func: 'onWork' }] }
    ]
  });
  let httpData = reactive({
    order: {},
    list: []
  });
  let init = async () => {
    let res = await uni.$uv.http.post('orders/detail', {
      order_id: props.data.id
    });
    let count = 0;
    httpData.list = res.products.map(r => {
      count += r.quantity;
      return { ...r, money: r.price * r.quantity };
    });
    res.order.count = count;
    httpData.order = res.order;
  };
  let onWork = val => {
    workData.val = { ...val, order_id: props.data.id };
    workData.show = true;
  };
  watch(
    propId,
    async () => {
      await init();
      // 如果是扫码进来的，直接显示报工
      if (props.data.action === 'product_schedule') {
        onWork(props.data);
      }
    },
    { immediate: true },
    { deep: true }
  );
</script>

<style lang="scss" scoped>
  .detail {
    padding: 17rpx;
    flex-wrap: wrap;
    font-size: 2vw;
    display: flex;
    &-item {
      width: 50%;
      margin: 8.5rpx 0;
      display: flex;
      &-label {
        font-weight: bold;
      }
    }
    &-table {
      width: 100%;
      margin: 17rpx 0;
      ::v-deep .table-paging {
        display: none;
      }
    }
  }
</style>
